<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>

<head>
    <title>路线管理</title>

</head>

<body>

<div class="container">
    <div div="row">
        <div class="col-sm-10">
            <div class="row">
                <div class="panel panel-default">

                    <div class="panel-heading">路线管理</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-offset-1 col-sm-10">

                                <form id="idNetworkQueryForm" class="form-horizontal" role="form" method="post" action="" >
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div class="col-sm-4">
                                                    <label class="control-label">网点名称:</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input name="networkName" type="text" class="form-control "/>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div class="col-sm-4">
                                                    <label for="inputStartLocation" class="control-label">所在地:</label>
                                                </div>

                                                <div class="col-sm-8">
                                                    <div class="input-group ">
                                                        <input id="inputStartLocation" type="text" class="form-control "
                                                               placeholder="" disabled/>

                                                        <input id="inputStartLocationHidden" type="hidden"
                                                               name="locationId">

                                                        <div class="input-group-btn">
                                                            <button id="btnStartLocation" class="btn btn-default"
                                                                    type="button">
                                                                <span class="glyphicon glyphicon-globe"></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div class="col-sm-4">
                                                    <label class="control-label">联系人姓名:</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" name="contactName">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div class="col-sm-4">
                                                    <label class="control-label">联系人电话:</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="tel" class="form-control" name="phoneNo">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-warning">查询</button>
                                    <button type="reset" class="btn btn-default">重置</button>
                                    <button type="button" class="btn btn-success" onclick="javascript:location='${ctx}/workbench/network/add'">新增</button>


                                </form>

                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="row">

                <!--线路列表-->
                <table id="idNetoworkListTable" class="table table-bordered table-hover" data-toggle="table">
                    <thead>
                    <tr>
                        <th>网点名称</th>
                        <th>所在地</th>
                        <th>详细地址</th>
                        <th>联系人</th>
                        <th>联系人电话</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="idNetworkListTableBody">


                    </tbody>
                </table>

            </div>
            <div class="row">
                <!--                    <span class="pull-right">第1-20条记录，共100条记录</span>-->
                <ul class="pagination pagination-sm pull-left">
                    <li class="disabled"><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>

            </div>
        </div>

    </div>
</div>


<!-- Large modal -->

<div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">地区选择</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="divRegionSelector"></div>
            </div>

        </div>
    </div>
</div>


<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/regionselector.js"></script>

<script>


    $(function () {

        $("#networkmanagement-tab").addClass("active");
        $("#idNetworkQueryForm").submit(function(e){
            e.preventDefault();
            //组装数据
            var params = {};
            $("#idNetworkQueryForm").find("input[name]").each(function(index,item){
                if($(this).val()!=""&&$(this).val()!=null&&$(this).val()!=undefined){
                    params[$(this).attr("name")] = $(this).val();
                }
            });

            showNetworks(params)
            console.log(JSON.stringify(params));
        });
        $("#idNetworkQueryForm").one('reset',function(e){
            $("#idNetworkQueryForm").find("input").each(function(index,item){
             $(this).val('');
            });
            showNetworks();
        });
        var showNetworks = function (params) {
            var queryParams = {startIndex: 1, endIndex: 100000};
            if (params != null || params != undefined || params != "") {
                queryParams["params"] = params;
            }
            var requestUrl = "${ctx}/workbench/networks";
            $.ajax({
                url: requestUrl,
                type: 'post',
                contentType: 'application/json;charset=UTF-8',
                dataType: 'json',
                data: JSON.stringify(queryParams),
                success: function (result, textStatus, jqXHR) {
                    console.log(result);
                    var data = result.data;

                    var htmlStr = "";
                    $(data).each(function (index, item) {
                        console.log(item.location.locationName);
                        htmlStr += "<tr>"
                                + "<td>"+item.networkName+"</td>"
                                + "<td>"+ item.location.locationName +"</td>"
                                + "<td>"+item.address+"</td>"
                                + "<td>"+item.contacts[0].contactName+"</td>"
                                + "<td>"+item.contacts[0].contactAccount+"</td>"
                                + "<td>"+(item.status==1?"已开通":"未开通")+"</td>"
                                + "<td>"
                                + "<button data-my-network-id='"+item.networkId+"' class='btn btn-primary btn-network-detail'>查看详情</button>"
                                + "<button data-my-network-id='"+item.networkId+"'data-my-network-name='"+item.networkName+"'  class='btn btn-danger btn-network-delete'>删除</button>"
                                + "</td>"
                                + "</tr>";

                    });
                    $("#idNetworkListTableBody").html(htmlStr);
                    $("#idNetworkListTableBody").find(".btn-network-detail").click(function () {
                        var lineId = $(this).data("my-network-id")
                        window.location = "${ctx}/workbench/network/detail?id=" + lineId;
                    });

                    $('#idNetworkListTableBody').find(".btn-network-delete").unbind("click");
                    $("#idNetworkListTableBody").find(".btn-network-delete").click(function () {
                        var networkId = $(this).data("my-network-id");
                        var networkName  = $(this).data("my-network-name");
                        deleteNetwork(networkId,networkName);
                    });


                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 通常 textStatus 和 errorThrown 之中
                    // 只有一个会包含信息
                    this; // 调用本次AJAX请求时传递的options参数
                }
            });
        };


        var deleteNetwork = function(networkId,networkName){
            //先显示确认框
            showMyDialog("温馨提示","删除操作不可逆，请谨慎操作！<br>你确定要删除网点："+networkName+"?",function(){
                var requestUrl ="${ctx}/workbench/network/delete";
                var params ={"id":networkId};
                $.get(requestUrl,params, function (result, textStatus, jqXHR) {
                    if(result.status==1){
                        showMyDialog("系统信息",result.message,null,'sm')
                    }
                    showNetworks();
                },'json');

            },'sm',true);
        };


        showNetworks();


        //地图选择器
        var myRegionSelector = regionselector.init('divRegionSelector');
        myRegionSelector.click(function (param) {
            alert(param.value);

        });

        //始发地选择
        $('#btnStartLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputStartLocation').val(param.text);
                $('#inputStartLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });

        //终点地选择
        $('#btnEndLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputEndLocation').val(param.text);
                $('#inputEndLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });

    })
</script>
</body>

</html>